<template>
  <view class="page container">
    <u-form
      :model="basicForm"
      :rules="rules"
      labelPosition="top"
      ref="form"
      labelWidth="auto"
      :labelStyle="{
      	fontSize: '14px',
      	color: '#B2B2B2',
      	lineHight: '20px'
      }">
      <view class="basic-style">
        <u-form-item label="含税金额(元)" prop="amount" required>
					<h-money-input placeholder="请输入含税金额" v-model="basicForm.amount" :min="basicForm.invoicingAmount" @blur="amountBlur"></h-money-input>
        </u-form-item>
				<span v-if="basicForm.invoicingAmount" style="color: red">
					<span> 当前款项已开票{{ basicForm.invoicingAmount }}元, 金额调整不可低于开票金额</span>
				</span>
				<u-form-item label="税率(%)" prop="taxRate">
					<h-dict-select
						style="width: 100%"
						disabled
						v-model="basicForm.taxRate" 
						placeholder="请选择税率" 
						dictName="contract_rate_type"
						border="surround"
						suffixIcon="arrow-down-fill"
					></h-dict-select>
				</u-form-item>
				<u-form-item label="税额(元)" prop="taxation">
				  <u--input v-model="basicForm.taxation" placeholder="请输入税额" disabled></u--input>
				</u-form-item>
				<u-form-item label="未税金额(元)" prop="untaxedAmount">
				  <u--input v-model="basicForm.untaxedAmount" placeholder="请输入未税金额" disabled></u--input>
				</u-form-item>
				<u-form-item label="备注" prop="remark">
					<!-- #ifdef APP -->
					<u--textarea :confirm-type="null" count v-model="basicForm.remark" placeholder="请输入备注" maxlength="200"></u--textarea>
					<!-- #endif -->
				  <!-- #ifdef H5 -->
				  <u--textarea confirm-type="done" v-model="basicForm.remark" placeholder="请输入备注" maxlength="200"></u--textarea>
				  <!-- #endif -->
				</u-form-item>
      </view>
      <view class="space-x-1 mt-1" style="display: flex">
        <u-button type="primary" text="保存" :loading="loading" @click="onSubmit"></u-button>
        <u-button type="primary" text="关闭" :loading="loading" @click="onClose"></u-button>
      </view>
    </u-form>
  </view>
</template>

<script>
export default {
  name: 'FormRate',
  props: {
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    datailDisabled: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: null,
    }
  },
  data() {
    return {
      loading: false,
      basicForm: {
        amount: '',
        taxation: '',
        untaxedAmount: '',
				remark: ''
      },
      rules: {
        amount: [ { required: true, message: '请输入含税金额!', trigger: ['blur', 'change'] } ]
      },
    }
  },
  created() {},
  methods: {
    reset() {
      this.$refs.form.resetFields()
    },
		// 填写含税金额
		amountBlur () {
			if (this.basicForm.invoicingAmount) {
				if (this.basicForm.amount === '') {
					this.basicForm.taxation = 0.00
					this.basicForm.untaxedAmount = 0.00
					return false
				}
				if (Number(this.basicForm.amount) < Number(this.basicForm.invoicingAmount)) {
					this.$set(this.basicForm, 'amount', this.basicForm.invoicingAmount)
				}
			}
			// 计算税额(元) 未税金额(元)
			this.basicForm.taxation = ((Number(this.basicForm.amount) / (1 + Number(this.basicForm.taxRate) / 100)) * (Number(this.basicForm.taxRate) / 100)).toFixed(2); // 税额
			this.basicForm.untaxedAmount = (Number(this.basicForm.amount) - this.basicForm.taxation).toFixed(2); // 未税金额;
		},
    async onSubmit() {
      await this.$refs.form.validate()
			if(this.loading) return
			this.loading = true
      if (!this.index) {
        this.$emit('submit', [{
          id: parseInt(Math.random() * 1000000000000),
          ...this.basicForm,
        }, this.index])
      } else {
        this.$emit('submit', [this.basicForm, this.index])
      }
    },
    onClose() {
			this.loading = false
      this.$emit('close')
    },
  },
}
</script>

<style scoped></style>
